
<template>

  <Mainframe title="客户贷款申请">
    <el-form :model="applyRecord" label-width="120px" ref="applyFormRef"
             :rules="formValidateRule">
      <el-form-item label="姓名"  prop="customerName">
        <el-input v-model="applyRecord.customerName" maxlength="10"/>
      </el-form-item>
      <el-form-item label="身份证号码" rules="formValidateRule.sfzNo" prop="sfzNo">
        <el-input v-model="applyRecord.sfzNo" maxlength="18" />
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-select v-model="applyRecord.sex" default-first-option placeholder="请选择性别">
          <el-option
              v-for="item in [{value:1,label:'男'},{value:0,label:'女'}]"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="贷款金额" required prop="applyAmount">
        <el-input v-model.number="applyRecord.applyAmount" maxlength="8" />
      </el-form-item>
      <el-form-item label="贷款期限" required prop="terms">
        <el-select v-model="applyRecord.terms" default-first-option placeholder="Select">
          <el-option
              v-for="item in termOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="收款账号" required prop="bankCard">
        <el-input v-model="applyRecord.bankCard" />
      </el-form-item>
      <el-form-item label="还款方式" required prop="lornType">
        <el-select v-model="applyRecord.lornType" placeholder="请选择还款方式">

          <el-option
              v-for="item in lornOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="submitForm(this.$refs.applyFormRef)" type="primary">提交申请</el-button>
        <el-button type="reset">取消</el-button>
      </el-form-item>
    </el-form>
  </Mainframe>


</template>

<script>
import {ElMessage} from "element-plus";
import {reactive, ref} from 'vue'
 import Mainframe from '@/components/mainframe'

import { FormInstance, FormRules } from 'element-plus'
import {submitApply} from "@/saga/APi";
// const slots = useSlots()
// do not use same name with ref
export default {
  name: 'CustomerApply',
  mounted() {
    const formSize = ref('default');
    var loginJson = sessionStorage.getItem("loginedUser");
    this.loginer = JSON.parse(loginJson);
  },
  data () {
    return {
      applyFormRef: ref('applyFormRef'),
      formValidateRule: reactive({
        customerName: [
          { required: true, message: '请输入客户名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在3至5之间', trigger: 'blur' },
        ],
        sfzNo: [
          {
            required: true,
            message: '请输入18位身份证号码',
            trigger: 'blur',
          },
        ],

        sex: [
          {
            required: true,
            message: '请选择性别',
            trigger: 'change',
          }
        ],

        terms: [
          {
            required: true,
            message: '请选择贷款期限',
            trigger: 'change',
          },
        ],

        applyAmount: [
          {
            required: true,
            message: '请选择贷款金额',
            trigger: 'blur',
          },
          {
            type: 'number',
            message: '只能输入数字',
            trigger: 'blur',
          },
        ],

        lornType: [
          {
            required: true,
            message: '请选择还款方式',
            trigger: 'change',
          },
        ],
        bankCard: [
          {
            required: true,
            message: '请输入银行卡号',
            trigger: 'blur',
          },
        ],
        desc: [
          { required: true, message: 'Please input activity form', trigger: 'blur' },
        ],
      }),


      termOptions:[{label:'1年',value:1},{label:'2年',value:2},{label:'3年',value:3}],
      lornOptions:[{label:'等额本息',value:1},{label:'等额本金',value: 2}],
      applyRecord: reactive({
        terms: 1,
        customerName: '',
        sfzNo: '',
        applyAmount: '',
        bankCard: '',
        lornType: null,
        desc: ''
      }),
      loginer:{}

    };
  },
  components: {
    Mainframe
  },

  methods: {

     _submit(data) {
       var that = this;
       submitApply(data).then((r)=> {
         if(r.code===200) {
           ElMessage.success(r.msg);
           that.$router.push({name: 'applyDetail',query:{"applyId": r.data.applyId}});
         } else if(r.code===300) {
           ElMessage.error(r.msg);
           that.$router.push('/login');
         }
      // this.$router.push('/customer/applyList')
    }).catch(error => {
      //发生错误时执行的代码
      console.log('异常响应')
      console.log(error)
    })},
    submitForm (formEl) {

      console.table(this.applyRecord);
      var data = this.applyRecord;
      data.customerId = this.loginer.uid;
      if (!formEl) return;
      formEl.validate((valid, fields) => {
        if (!valid) {
          console.log('error submit!', fields)
        }
      }).then((valid) => {
        if(valid) {
          console.log(1111111111111111111111)
            this._submit(data);
          }
        });
    }
  }
}

</script>



<style scoped>

</style>
